<template>
  <div class="company-container" v-loading="loading">
    <div class="company-container-search">
      <el-input
        v-model="companyPageQuery.keywords"
        style="width: 60%; height: 48px"
        placeholder="搜索公司关键词"
      >
        <template #append>
          <el-button
            :icon="Search"
            style="width: 68px"
            @click="getCompanyPage"
          />
        </template>
      </el-input>
    </div>
    <div style="display: flex; justify-content: center; align-items: center">
      <el-text type="info">行业：</el-text>
      <el-select
        v-model="companyPageQuery.industry"
        placeholder="行业"
        size="large"
        clearable
        @change="getCompanyPage"
        style="width: 128px; margin-right: 12px"
      >
        <el-option
          v-for="item in tagDatas"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-text type="info">城市：</el-text>
      <el-select
        v-model="companyPageQuery.location"
        placeholder="城市"
        size="large"
        clearable
        @change="getCompanyPage"
        style="width: 128px; margin-right: 12px"
      >
        <el-option
          v-for="item in constantEnum.LOCATION_ENUM"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-text type="info">融资阶段：</el-text>
      <el-select
        v-model="companyPageQuery.stage"
        placeholder="融资阶段"
        size="large"
        clearable
        @change="getCompanyPage"
        style="width: 128px; margin-right: 12px"
      >
        <el-option
          v-for="item in constantEnum.FINANCING_STAGE_ENUM"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-text type="info">规模：</el-text>
      <el-select
        v-model="companyPageQuery.scala"
        placeholder="规模"
        size="large"
        clearable
        @change="getCompanyPage"
        style="width: 128px; margin-right: 12px"
      >
        <el-option
          v-for="item in constantEnum.SCALA_ENUM"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div
      style="
        width: 100%;
        padding: 20px 68px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-content: flex-start;
      "
    >
      <div
        v-for="item in companyDatas"
        @click="$router.push('/hr/info/company/' + item.id)"
        style="
          width: 40%;
          margin: 8px;
          padding: 12px;
          border-radius: 12px;
          background-color: white;
          display: flex;
          cursor: pointer;
        "
      >
        <el-avatar :size="48" shape="square" :src="item.logo"></el-avatar>
        <div style="margin-left: 16px">
          <p>
            {{ item.name }}
            <el-tag type="info" style="margin-right: 8px">
              {{ item.industryName }}
            </el-tag>
          </p>
          <div style="margin: 0px 4px">
            <el-tag type="info" style="margin-right: 8px">
              {{ item.location }}
            </el-tag>
            <el-tag type="info" style="margin-right: 8px">
              {{ handleFinancingStage(item.financingStage) }}
            </el-tag>
            <el-tag type="info" style="margin-right: 8px">
              {{ handleScala(item.scala) }}
            </el-tag>
            <el-tag
              type="info"
              style="margin-right: 8px"
              v-for="one in item.otherTag"
            >
              {{ one }}
            </el-tag>
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex; justify-content: center; padding-bottom: 24px">
      <el-pagination
        v-model:current-page="companyPageQuery.pageNum"
        :page-size="companyPageQuery.pageSize"
        background
        layout="total, prev, pager, next"
        :total="companyTotal"
        @size-change="getCompanyPage"
        @current-change="getCompanyPage"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { constantEnum } from '@/constant/type'
import { CascaderProps, ElMessage } from 'element-plus'
import { CompanyPageQuery, CompanyType } from '@/api/company/type'
import { handleFinancingStage, handleScala } from '@/constant/type'
import { reqGetAllTag } from '@/api/tag'
import { TagType } from '@/api/tag/type'
import { useRoute } from 'vue-router'
import { reqGetCompanyPage } from '@/api/company'

onMounted(() => {
  getCompanyPage()
  getAllTag()
})

const route = useRoute()

const tagDatas = ref<TagType[]>([])

const loading = ref(false)
const companyPageQuery = ref<CompanyPageQuery>({
  pageNum: 1,
  pageSize: 10,
  keywords: (route.query.q as string) ? (route.query.q as string) : '',
  location: '',
  stage: undefined,
  scala: undefined,
  industry: undefined,
})

const needCompanyPageQuery = computed(() => {
  let data: CompanyPageQuery = {
    pageNum: companyPageQuery.value.pageNum,
    pageSize: companyPageQuery.value.pageSize,
    keywords: companyPageQuery.value.keywords,
    location: companyPageQuery.value.location,
    stage:
      typeof companyPageQuery.value.stage == 'number'
        ? companyPageQuery.value.stage
        : undefined,
    scala:
      typeof companyPageQuery.value.scala == 'number'
        ? companyPageQuery.value.scala
        : undefined,
    industry:
      typeof companyPageQuery.value.industry == 'number'
        ? companyPageQuery.value.industry
        : undefined,
  }
  return data
})

const companyDatas = ref<CompanyType[]>()
const companyTotal = ref(0)

const getCompanyPage = async () => {
  try {
    loading.value = true
    const { data } = await reqGetCompanyPage(needCompanyPageQuery.value)
    companyDatas.value = data.data.list
    companyTotal.value = data.data.total
  } catch (e) {
    ElMessage.error((e as Error).message)
  } finally {
    loading.value = false
  }
}

const getAllTag = async () => {
  let storageTag = sessionStorage.getItem('allTag')
  if (storageTag != null) {
    tagDatas.value = JSON.parse(storageTag)
    return
  }
  try {
    const { data } = await reqGetAllTag()
    sessionStorage.setItem('allTag', JSON.stringify(data.data))
    tagDatas.value = data.data
  } catch (e) {
    ElMessage.error((e as Error).message)
  }
}
</script>

<style scoped lang="scss">
.company-container {
  max-width: 100vw;
  min-width: 1200px;
  background: #dcdcdc8d;
  height: 100%;

  .company-container-search {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .company-item {
    width: 40%;
    height: 128px;
    margin: 8px;
    padding: 12px;
    border-radius: 12px;
    background-color: white;
    display: flex;
    justify-content: space-around;
    cursor: pointer;

    .company-item-button {
      display: none;
    }

    .company-item-hr {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

  .company-item:hover {
    .company-item-button {
      margin-top: 8px;
      display: block;
    }

    .company-item-hr {
      display: none;
    }
  }
}
</style>
